<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
    <title>工具包</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            min-height: 100vh;
            align-items: center;
            background: linear-gradient(45deg,#24006b,#f42f8c)
        }
        .container{
            width: 1200px;
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
            grid-gap: 15px;
            margin: 0 auto;
        }
        .container .card{
            position: relative;
            width: 300px;
            height: 400px;
            margin: 0 auto;
            background: #fff;
            box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
 
 
        }   
        .container .card:hover .face.face2{
            height: 60px;;
 
        }
       
        .container .card .face{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container .card .face.face1{
            box-sizing: border-box;
            padding: 20px;
        }
        .container .card .face.face1 h2{
            margin: 0;
            padding: 0;
        }
        
        .container .card .face.face2{
            background: #111;
            transition: 0.5s;
        }  
        .container .card .face.face2::before{
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 50%;
            height: 100%;
            background: rgba(255, 255, 254, 0.1);
        }
        .container .card:nth-child(1) .face.face2{
            background: linear-gradient(45deg,#3503ad,#f7308c);
        }
        .container .card:nth-child(2) .face.face2{
            background: linear-gradient(45deg,#ccff00,#09afff);
        }
        .container .card:nth-child(3) .face.face2{
            background: linear-gradient(45deg,#e91e63,#ffeb3b);
        }
        .container .card .face.face2 h2{
            margin: 0;
            padding: 0;
            font-size: 20px;
            color: #fff;
            transition: .5s;
            text-shadow: 2px 2px 6px #ccc;
 
        }
        .container .card:hover .face.face2 h2{
            font-size: 15px;
        } 
    </style>
</head>
 
<body>
    <div class="container">
        <div class="card" onclick="window.open('https://www.json.cn/')">
            <div class="face face1">
                <div class="content">
                    <h2>JSON工具</h2>
                    <p>JSON工具是用来解析，生成JSON</p>
                </div>
            </div>
            <div class="face face2">
                <h2>JSON格式化</h2>
            </div>
        </div>
        <div class="card" onclick="window.open('https://ps.gaoding.com/#/')">
            <div class="face face1">
                <div class="content">
                    <h2>在线ps</h2>
                    <p>这是一个在线ps功能</p>
                </div>
            </div>
            <div class="face face2">
                <h2>在线ps</h2>
            </div>
        </div>
        <div class="card" onclick="window.open('https://tool.lu/timestamp/')">
            <div class="face face1">
                <div class="content">
                    <h2>时间戳</h2>
                    <p>这是一个处理时间戳的工具</p>
                </div>
            </div>
            <div class="face face2">
                <h2>时间戳</h2>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="card" onclick="window.open('https://c.runoob.com/front-end/55')">
            <div class="face face1">
                <div class="content">
                    <h2>颜色转换</h2>
                    <p>这是一个颜色转换工具</p>
                </div>
            </div>
            <div class="face face2">
                <h2>颜色转换</h2>
            </div>
        </div>
        <div class="card"  onclick="window.open('https://www.iconfont.cn/')">
            <div class="face face1">
                <div class="content">
                    <h2>阿里图标</h2>
                    <p>阿里图标素材库</p>
                </div>
            </div>
            <div class="face face2">
                <h2>阿里图标</h2>
            </div>
        </div>
        <div class="card" onclick="window.open('https://convertio.co/zh/audio-converter/')">
            <div class="face face1">
                <div class="content">
                    <h2>音频格式转换</h2>
                    <p>在线音频格式转换</p>
                </div>
            </div>
            <div class="face face2">
                <h2>音频格式转换</h2>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="card"  onclick="window.open('https://tinypng.com/')">
            <div class="face face1">
                <div class="content">
                    <h2>图片压缩</h2>
                    <p>在线图片压缩工具</p>
                </div>
            </div>
            <div class="face face2">
                <h2>图片压缩</h2>
            </div>
        </div>
        <div class="card"  onclick="window.open('https://cli.im/')">
            <div class="face face1">
                <div class="content">
                    <h2>二维码</h2>
                    <p>在线生成，识别二维码</p>
                </div>
            </div>
            <div class="face face2">
                <h2>二维码</h2>
            </div>
        </div>
        <div class="card"   onclick="window.open('https://www.bejson.com/xml2json/')">
            <div class="face face1">
                <div class="content">
                    <h2>JSON和XML互转</h2>
                    <p>JSON和XML互转</p>
                </div>
            </div>
            <div class="face face2">
                <h2>JSON和XML互转</h2>
            </div>
        </div>
    </div>
</body>
 
</html>